<template>
  <div class="container-line">
    <div class="top">
      <p class="title">上一周游客量趋势图</p>
      <span class="deco"></span>
    </div>
    <div
      class="lineChart"
      ref="lineChart"
      style="height: 200px; width: 100%"
    ></div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import * as echarts from "echarts";

const lineChart = ref();
onMounted(() => {
  let mychart = echarts.init(lineChart.value);
  mychart.setOption({
    title: {
      text: "访问量",
      textStyle: {
        color: "white",
        fontSize: 16,
      },
    },
    tooltip: {
      trigger: "axis",
      formatter: "{b0}: {c0}",
      position: "top",
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      splitLine: {
        show: false,
      },
      data: ["MON", "THU", "WEN", "THU", "FRI", "SAT", "SUN"],
    },
    yAxis: {
      splitLine: {
        show: false,
      },
      axisLine: {
        show: true,
      },
      axisTick: {
        show: true,
      },
    },
    grid: {
      top: 40,
      right: 20,
      bottom: 30,
      left: 40,
    },
    series: {
      type: "line",
      data: [10, 700, 300, 0, 150, 10, 1300],
      smooth: true,
      triggerLineEvent: true,
      areaStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "#42b683", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#ff4b7a", // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
      },

      label: {
        show: true,
      },
    },
  });
});
</script>

<style lang="scss" scoped>
.container-line {
  margin: 10px 0px 0px 20px;
  background: url(../../images/dataScreen-main-cb.png) no-repeat;
  background-size: 100% 100%;
  // border: 1px solid cadetblue;
  .top {
    position: relative;
    // border: 1px solid red;
    height: 60px;
    .title {
      color: white;
      font-size: 20px;
    }
    .deco {
      background: url(../../images/dataScreen-title.png);
      display: inline-block;
      width: 68px;
      height: 7px;
    }
  }
}
</style>
